<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 列表渲染 -->
        <table>
            <tr>
                <th v-for="item in title">{{item}}</th>
            </tr>
            <!-- <tr v-for="item in grade">
                <td v-for="val in item">{{val}}</td>
            </tr> -->

            <!-- item.chinese 虽然写起来比较麻烦,修改数据时改的是源数据  -> 视图也会更新-->
            <tr v-for="item in grade">
                <td>{{item.name}}</td>
                <td>{{item.class}}</td>
                <td @click="item.chinese++">{{item.chinese}}</td>
                <td >{{item.math}}</td>
                <td>{{item.english}}</td>
                <td>{{item.chinese + item.math + item.english}}</td>
            </tr>
            
            <!-- 
                渲染时对数据解构 => 得到的新变量  -> 改变变量对源数据没有影响
                chinese = item.chinese  
             -->
            <!-- <tr v-for="{name,class:_class,chinese,math,english} in grade">
                <td>{{name}}</td>
                <td>{{_class}}</td>
                <td @click="chinese++">{{chinese}}</td>
                <td>{{math}}</td>
                <td>{{english}}</td>
                <td>{{chinese + math + english}}</td>
            </tr> -->
        </table>
    </ul>
    </div>
</body>
<script>
    // v-for  列表渲染, 把一个数组对应为一组元素
    // 语法:   
    
    // v-for 可以用于遍历数组/对象/数值
    
    // 遍历数组  
    // v-for="item in arr"
    // v-for="(item,index) in arr"

     // v-for="item of arr"
    // v-for="(item,index) of arr"
    
    // 遍历对象
    // v-for="val in obj"
    // v-for="(val,key) in obj"
    // v-for="(val,key,index) in obj"

    // 遍历数组:
    // v-for="n in 10"
    // v-for="(n,i) in 10"

    // 注意: v-for 遍历数组/对象/数值得到的item,index 仅能在当前标签以及子元素内使用 

    new Vue({
        el:"#app",
        data:{
            list:[1,4,7,2,5,8,3,6,9],
            obj:{name:"张三",age:18,height:"177cm",weight:"70kg"},
            title:["姓名","班级","语文","数学","英语","总分"],
            grade:[{
                name:"张三",
                class:"2302",
                chinese:55,
                math:66,
                english:77
            },{
                name:"李四",
                class:"2302",
                chinese:76,
                math:69,
                english:91
            },{
                name:"王五",
                class:"2302",
                chinese:82,
                math:49,
                english:72,
            }]

        },
    })

  


</script>
</html>